<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
    div{
        width: 900px;
        margin: 0 auto;
        position: relative;

    }
    img{
        position: absolute;
        left: 0;
        top:0;
    }
    .zhong1{
        width: 25px;
        height: 25px;
        padding: 15px;
        position: absolute;
        left: 10px;
        top: 250px;
        color:white;
        background-color: rgba(255, 255, 255, 0.5);
        z-index: 10;
        text-align: center;
    }
    .zhong2{
        width: 25px;
        height: 25px;
        padding: 15px;
        position: absolute;
        right: 25px;
        top: 250px;
        color:white;
        background-color: rgba(255, 255, 255, 0.5);
        z-index: 10;
        text-align: center;
    }
    .zhong1:hover,.zhong2:hover,.xia1:hover,.xia2:hover,.xia3:hover,.xia4:hover,.xia5:hover,.xia6:hover{
        background-color: rgba(255, 255, 255, 0.7);
    }
   .xia1{
        width: 17px;
        padding: 3px;
        position: absolute;
        left: 70px;
        top:450px ;
        color:white;
        background-color: rgba(255, 255, 255, 0.5);
        z-index: 10;
        text-align: center;
    }
    .xia2{
        width: 17px;
        padding: 3px;
        position: absolute;
        left: 105px;
        top:450px ;
        color:white;
        background-color: rgba(255, 255, 255, 0.5);
        z-index: 10;
        text-align: center;
    }
    .xia3{
        width: 17px;
        padding: 3px;
        position: absolute;
        left: 140px;
        top:450px ;
        color:white;
        background-color: rgba(255, 255, 255, 0.5);
        z-index: 10;
        text-align: center;
    } .xia4{
        width: 17px;
        padding: 3px;
        position: absolute;
        left: 175px;
        top:450px ;
        color:white;
        background-color: rgba(255, 255, 255, 0.5);
        z-index: 10;
        text-align: center;
    } .xia5{
        width: 17px;
        padding: 3px;
        position: absolute;
        left: 210px;
        top:450px ;
        color:white;
        background-color: rgba(255, 255, 255, 0.5);
        z-index: 10;
        text-align: center;
    }
    .xia6{
        width: 17px;
        padding: 3px;
        position: absolute;
        left: 245px;
        top:450px ;
        color:white;
        background-color: rgba(255, 255, 255, 0.5);
        z-index: 10;
        text-align: center;
    }

    

    </style>
    
</head>
<body>
    <div>
<div class="zhong1">左</div>
<div class="zhong2">右</div>
<img src="image/c6.jpg" alt="">
<img src="image/c5.jpg" alt="">
<img src="image/c4.jpg" alt="">
<img src="image/c3.jpg" alt="">
<img src="image/c2.jpg" alt="">
<img src="image/c1.jpg" alt="">
<div class="xia1">1</div>
<div class="xia2">2</div>
<div class="xia3">3</div>
<div class="xia4">4</div>
<div class="xia5">5</div>
<div class="xia6">6</div>
</div>
</body>
</html> 